<template>
  <view class="userLayout pageBg">
    <!-- 占位 -->
    <view
      :style="{
        height: getNavBarHeight() + 'px',
      }"
    ></view>
    <!-- 头像昵称ip -->
    <view class="userInfo">
      <!-- 头像 -->
      <view class="avatar">
        <image src="../../static/images/logo.png" mode="scaleToFill" />
      </view>
      <!-- ip -->
      <view class="ip"> {{ userInfo.IP }} </view>
      <!-- 归属地 -->
      <view class="address"
        >来自于:
        {{
          userInfo.address.city || userInfo.address.province || userInfo.address
        }}</view
      >
    </view>

    <!-- 菜单项 -->
    <view class="section">
      <!-- 列表项 -->
      <view class="list">
        <!-- 每一行 -->
        <view
          class="row"
          v-for="(item, index) in menuList.slice(0, 3)"
          @click="goPage(item.id)"
        >
          <view class="left">
            <!-- 图标 -->
            <uni-icons :type="item.icon" size="20"></uni-icons>
            <view class="text">{{ item.name }}</view>
          </view>
          <view class="right">
            <view class="text" v-if="index !== 2">{{
              index == 0 ? userInfo.downloadSize : userInfo.scoreSize
            }}</view>
            <uni-icons type="right" size="15" color="#aaa"></uni-icons>
          </view>

          <!-- 联系客服 -->
          <template v-if="index == 2">
            <!-- #ifdef MP -->
            <button open-type="contact">联系客服</button>
            <!-- #endif -->
            <!-- #ifndef MP -->
            <button @click="callPhone">拨打电话</button>
            <!-- #endif -->
          </template>
        </view>
      </view>
    </view>

    <!-- 菜单项 -->
    <view class="section">
      <!-- 列表项 -->
      <view class="list">
        <!-- 每一行 -->
        <view
          class="row"
          v-for="(item, index) in menuList.slice(3, 5)"
          @click="goPage(item.id)"
        >
          <view class="left">
            <!-- 图标 -->
            <uni-icons :type="item.icon" size="20"></uni-icons>
            <view class="text">{{ item.name }}</view>
          </view>
          <view class="right">
            <uni-icons type="right" size="15" color="#aaa"></uni-icons>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getNavBarHeight } from "../../utils/system";
import { apiUserInfo } from "../../api/apis";
// 菜单配置
const menuList = [
  {
    name: "我的下载",
    icon: "download-filled",
    id: 1,
  },
  {
    name: "我的评分",
    icon: "hand-up-filled",
    id: 2,
  },
  {
    name: "联系客服",
    icon: "chatbubble-filled",
    id: 3,
  },
  {
    name: "订阅更新",
    icon: "notification-filled",
    id: 4,
  },
  {
    name: "常见问题",
    icon: "flag-filled",
    id: 5,
  },
];

const userInfo = ref({});

// 拨打电话回调
const callPhone = () => {
  uni.makePhoneCall({
    phoneNumber: "123456789",
    success: (result) => {},
    fail: (error) => {},
  });
};

// 跳转页面回调
const goPage = (id) => {
  // 点击我的下载
  if (id === 1) {
    uni.navigateTo({
      url: `/pages/classList/classList?name=我的下载&type=download`,
    });
  }
  // 点击我的评分
  if (id === 2) {
    uni.navigateTo({
      url: `/pages/notice/detail`,
    });
  }
  if (id === 4 || id === 5) {
    uni.navigateTo({
      url: `/pages/notice/detail`,
    });
  }
};

// 获取用户信息
const getUserInfo = async () => {
  uni.showLoading({
    title: "加载中",
    mask: true,
  });
  const res = await apiUserInfo();
  userInfo.value = res.data;
  uni.hideLoading();
};
getUserInfo();
</script>

<style lang="scss" scoped>
.userLayout {
  .userInfo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 50rpx 0;
    .avatar {
      width: 160rpx;
      height: 160rpx;
      border-radius: 50%;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
      }
    }
    .ip {
      font-size: 44rpx;
      color: #333;
      padding: 20rpx 0 5rpx;
    }
    .address {
      font-size: 28rpx;
      color: #ababab;
    }
  }

  .section {
    width: 690rpx;
    margin: 50rpx auto;
    border: 1px solid #eee;
    border-radius: 10rpx;
    box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.05);

    .list {
      .row {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 30rpx;
        height: 100rpx;
        border-bottom: 1px solid #eee;
        background-color: #fff;

        &:last-child {
          border-bottom: none;
        }

        .left {
          display: flex;
          align-items: center;
          :deep() {
            .uni-icons {
              color: $brand-theme-color !important;
            }
          }

          .text {
            padding-left: 20rpx;
            color: #666;
          }
        }
        .right {
          display: flex;
          align-items: center;

          .text {
            font-size: 28rpx;
            color: #aaa;
          }
        }
        button {
          position: absolute;
          top: 0;
          left: 0;
          height: 100rpx;
          width: 100%;
          opacity: 0;
        }
      }
    }
  }
}
</style>
